<template>
<article class="page bg-white">
  <headerbar>红云播推荐</headerbar>

  <section class="frame-content-sub bg-white">

  <!--滚动视频-->
  <section class="scroll-imgs scroll-imgs-noborder">
    <div class="inner">
      <ul class="video">
        <li v-for="item in videoList">
          <div :style="{'background-image':'url('+tools.getImgUrl(item.picId)+')'}" class="poster">
            <video @click="playVideo($event, item)" :src="getVideoSrc(item)" :poster="tools.getImgUrl(item.picId)" preload="auto"></video>
          </div>
        </li>
      </ul>
    </div>
  </section>

  </section>

</article>
</template>

<script>
  import footerbar from '@/components/layout/footerbar.vue'
  import searchBox from '@/components/layout/searchBox.vue'
  import redCloudHeadMenu from '@/components/common/redCloudHeadMenu.vue'
  import banner from '@/components/common/banner.vue'
  import dialogMore from '@/components/layout/dialogMore.vue'
  import homeHeaderbar from '@/components/layout/homeHeaderbar.vue'
  import tools from '../../../utils/tools'
  export default {
    components: {footerbar, searchBox, redCloudHeadMenu, dialogMore, banner, homeHeaderbar},
    name: 'home',
    data () {
      return {
        partyList: [],
        videoList: [],
        userInfo: {}
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      this.indexMiddle()
    },
    methods: {
      goVideo (item) {
        this.$store.state.videoDetail = item
        this.$router.push({name: 'videoDetail', query: {id: item.id}})
      },
      showMore () {
        if (!this.getRole()) {
          return this.showNoRoleAlart()
        }
        this.$refs.dialog.show()
      },
      go (name) {
        if (!this.getRole()) {
          return this.showNoRoleAlart()
        }
        this.$router.push({name: name})
      },
      goOtherPlatform (name) {
        this.$router.push({name: name})
      },
      goOneAnswer () {
        if (!this.getRole()) {
          return this.showNoRoleAlart()
        }
        this.$store.state.oneAnswerFrom = true
        this.$router.push({name: `oneAnswerEveryday`})
      },
      goChannel (id) {
        this.$router.push({name: 'newsChannel', query: {id: id}})
      },
      goRedGuiyang () {
        console.log('---------------g')
        if (window.android && window.android.redGuiyang) {
          window.android.redGuiyang()
        }
      },
      goZms () {
        console.log('---------------g')
        if (window.android && window.android.zms) {
          window.android.zms()
        }
      },
      goDistanceLearning () {
        console.log('---------------g')
        if (window.android && window.android.distanceLearning) {
          window.android.distanceLearning()
        }
      },
      indexMiddle () {
        let params = {
          count: '1005'
        }
        this.fetchService.indexMiddle(params).then(res => {
          if (res.code === 0) {
//            this.videoList = res.data
            this.fetchDetail(res.data)
          }
        })
      },
      fetchDetail (list) {
        let me = this
        list.forEach((v, index) => {
          (function (v, index) {
            me.fetchService.contentPageDetail(v.id).then(res => {
              v.detail = res.data
              me.videoList.push(v)
            })
          })(v, index)
        })
      },
      playVideo (e, item, index) {
        this.$store.state.newsDetail = item
        let target = e.target
        this.$createVideoPlayerComponent({
          $props: {
            videoUrl: e.target.src
          }
        }).show()
        return false
        document.querySelectorAll('.video video').forEach(v => {
          v.pause()
        })
        target.style.opacity = '1'
        e.target.play()
        if (e.target._isPlaying === undefined) {
          console.log(target.style)
          e.target._isPlaying = true
          e.target.play()
        } else {
          delete e.target._isPlaying
          target.pause()
        }
      },
      getVideoSrc (item) {
        return this.tools.getImgUrl(item.detail.files[0].fileId)
      },
      showAlart () {
        // tools.tip('模块正在开发建设中')
        this.$router.push({name: `workingTrends`})
      },
      showNoRoleAlart () {
        tools.tip('你没有权限访问')
      },
      getRole () {
        if (this.userInfo.type === '10') {
          return false
        } else {
          return true
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";

  .scroll-imgs {
    background:rgba(255,255,255,1);
    padding:0;
    &::-webkit-scrollbar {
      display: none;
    }
    .inner {
      padding:0;
    }
    &.scroll-imgs-noborder {
      padding:0;
      margin-left:0px;
    }
    .video {
      display:flex;
      flex-wrap: wrap;
      justify-content:flex-start;
      li {
        height:510px;
        width:33.3%;
        background:$theme-color;
        flex-shrink:0;
        overflow: hidden;
        position:relative;
        margin-right: 0.05%;
        margin-bottom:0px;
        &:nth-child(3n) {
          margin-right:0;
        }
        .poster {
          width:100%;
          height:100%;
          position:absolute;
          left:0;
          z-index:2;
          background:url('') no-repeat center;
          background-size:cover;
        }
        video {
          opacity: 0;
          z-index:1;
          width:100%;
          position:absolute;
          left:0;
          top:50%;
          transform:translateY(-50%);
        }
      }
    }
  }

</style>
